<template>
  <div>
    <div v-if="!token" class="login">
      <img :src="`data:image/gif;base64,${form.image}`" v-if="form.image" />
      <div>
        <input type="text" v-model="form.code" />
      </div>
      <div>
        <button @click="login">登录</button>
      </div>
    </div>
    <div v-else>
      <div style="display: flex">
        <el-input v-model="noticeTitle" placeholder="请输入标题"></el-input>
        <el-button type="primary" @click="getNoticeList">刷新</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="remark" label="备注" width="180" />
        <el-table-column prop="noticeTitle" label="通知标题" width="180" />
        <el-table-column prop="noticeType" label="通知类型" width="180" />
        <el-table-column prop="status" label="通知状态" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";

const baseUrl = `http://119.29.41.94:8080`;
const loading = ref(true);
const form = ref({
  code: "",
  uuid: "",
  username: "admin",
  password: "admin123",
  image: "",
});

/* 用户自己输入的数据：通知标题标题 */
const noticeTitle = ref('');
const token = ref();
const tableData = ref();
/*
  1.获取验证码
  2.登录获取token
  3.获取数据,带token
 */
const getCode = async () => {
  const { data } = await axios.get(`${baseUrl}/captchaImage`);
  form.value.image = data.img;
  form.value.uuid = data.uuid;
  console.log(data);
};
const login = async () => {
  const { data } = await axios.post(`${baseUrl}/login`, form.value);
  token.value = data.token;
  getNoticeList();
};

const getNoticeList = async () => {
  loading.value = true;
  const { data } = await axios.get(`${baseUrl}/system/notice/list`, {
    /* parmas 路径传参 ，第一种方式*/
    params: {
      /* 路径上的参数 */
      noticeTitle: noticeTitle.value,
    },
    headers: {
      Authorization: `Bearer ${token.value}`,
    },
  });
  console.log(data);

  tableData.value = data.rows;
  loading.value = false;
};

getCode();
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
